<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>智媒云图 - 智媒视听</title>
    <link rel="import" href="template/head.html?__inline">
    <script src="/node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div>
    <a name="duty1"></a>
    <link rel="import" href="template/nav.html?__inline">

    <div class="videoBox">
        <div class="title">智媒视听</div>
        <ul>
            <li class="item" v-for="i in item">
                <a v-bind:href="['vdetial.html?id='+i.id]" target="_blank">
                    <span v-bind:style="{backgroundImage:'url('+i.cover+')'}" v-if="i.cover"/></span>
                    <p class="title">{{i.title}}</p>
                    <p class="time">{{i.ctime}}</p>
                    <p class="desc">{{i.summary | sliceStr}}</p>
                </a>
            </li>
            <li class="more" v-on:click="loadList()">
                <i v-if="loadlock"></i>{{moretxt}}
            </li>
        </ul>
    </div>

    <link rel="import" href="template/footer.html?__inline">
</div>

<script>
    Vue.filter("sliceStr", function(value) {   //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面
        if (value.length > 90) {
            return value.substring(0,90)+'…';
        }else{
            return value;
        }
    });

    var videoBox = new Vue({
        el: '.videoBox',
        data: {
            item: [],
            moretxt: '点击加载更多…',
            curpage: 1,
            loadlock: true
        },
        mounted() {
            this.loadList();
        },
        methods: {
            loadList(){
                var _this = this;
                if(!_this.loadlock) return;
                _this.moretxt = '加载中…'
                $.ajax({
                    type: "POST",
                    url: "http://m.mp.oeeee.com/uncache.php?m=Video&a=jsonp4list",
                    data: {page:_this.curpage},
                    dataType: "jsonp",
                    success: function(res) {
                        if (res) {
                            _this.moretxt = '点击加载更多…'
                            _this.item = _this.item.concat(res.data);
                            _this.curpage ++;
                            if(_this.curpage > res.extra.totalPage){
                                _this.moretxt = '已经是最底了哦。';
                                _this.loadlock = false;
                            }
                        }
                    }
                });
            }
        }
    })
</script>
</body>
</html>